import { Link } from 'react-router-dom'
import NarBarAgain from '../components/NavBarAgain'
import './Personal.scss'
import { RightOutline } from 'antd-mobile-icons'
import { connect } from 'react-redux'
import action from '../store/action'
import _ from '../assets/utils'
import { Toast } from 'antd-mobile'
function Personal(props) {
    let { info, clearUserInfo, clearStoreList, navigate } = props
    const signout = () => {
        //清除 redux中的信息
        clearUserInfo();
        clearStoreList();
        //清除 token
        _.storage.remove('tk')
        //提示
        Toast.show({
            icon: 'success',
            content: '您已安全退出'
        })
        //跳转
        navigate('/login?to=/personal', { replace: true })
    }
    return <div className="personal-box">
        <NarBarAgain title='个人中心' />
        <div className="baseInfo">
            <Link to='/update'>
                <img className='pic' src={info.pic} alt='' />
                <p>{info.name}</p>
            </Link>
        </div>
        <div>
            <Link to='/store' className='tab'>
                我的收藏
                <RightOutline />
            </Link>
            <div className="tab" onClick={signout}>
                退出登录
                <RightOutline />
            </div>
        </div>
    </div>
}
export default connect(state => state.base, { clearUserInfo: action.base.clearUserInfo, clearStoreList: action.store.clearStoreList })(Personal)